<!DOCTYPE html>
<html>
<head>
    <title>CSS Transforms: SVG DOM API - transform styles</title>
    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
    <link rel="help" href="http://www.w3.org/TR/css3-transforms/#svg-transform">
    <link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-attribute-dom">
    <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGAnimatedTransformList">
    <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransformList">
    <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransform">
    <meta name="flags" content="svg dom">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <style type="text/css">
       svg {
           width: 300px;
           height: 300px;
       }
       
       #testRect1 {
           -webkit-transform: rotate(90deg);
           -moz-transform: rotate(90deg);
           transform: rotate(90deg);
       }
       
       #testRect2 {
           -webkit-transform: scale(0.5) translateX(50);
           -moz-transform: scale(0.5) translateX(50);
       }
    </style>
</head>
<body>
    <svg id="svg">
        <rect id="testRect1" width="100" height="100" fill="green"/>
        <rect id="testRect2" x="150" width="100" height="100" fill="green"/>
    </svg>
    <div id="log"></div>
    <script src="js/SVGTransformListStylesCommon.js"></script>
    <script src="js/SVGTransformListStylesTests.js"></script>
 </body>
</html>
